<template>
    <div class="latesttask">
        <div class="con">
            <div class="title">最新任务<img src="../../assets/home/task.png"></div>
            <ul>
                <li v-for="item in result" v-if="!item.comState" class="bgc_fff" :class="{ bgc_e4: item.comState }">
                    <div class="task clearfix" :class="[{ bl_red: item.type == 'VERY' },{  bl_orange: item.type == 'URGENT' },{ bl_blue: item.type == 'COMMON' }]">
                        <div class="task-left">
                            <p class="taskname">
                                <span>{{formatTime(item.description)}}</span>
                            </p>
                            <p class="detail clearfix">
                                <span class="proname">{{ item.name }}</span><span>{{ item.execEmpName }}</span><span class="time">{{ item.lastEndTime }}</span><span class="cutoff"></span>
                            </p>
                        </div>
                        <el-checkbox class="task-right" v-model="item.comState" @change="taskState(item.id, item.comState)"></el-checkbox>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            result: []
        };
    },
	methods: {
		formatTime: function (timer) {
			return timer.slice(0,16);
		},
        taskState(id, state) {
            var patchState = '';
            if (state) {
                patchState = '1'
            } else {
                patchState = '0'                
            }
            this.$http
            .patch(
                this.h + '/tasks/' + id,
                {
                    "comState": patchState,
                    "comEndTime": ""
                },
                {
                    headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                }
            ).then((res) => {
                console.log(res);
            }).catch((err) => {
                state = !state;
            })
        }
	},
    created() {
        this.$http.get(
            this.h + '/employees/' + localStorage.getItem('ID') + '/tasks',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }).then((res) => {
                for (var i = 0; i < res.data.data.length; i++) {
                    var a = res.data.data[i].lastEndTime.split('-');
                    var b = a[2].split(':');
                    var c = b[0].split(' ');
                    res.data.data[i].lastEndTime = a[1] + '-' + c[0] + ' ' + c[1] + ':' + b[1];
                }
                const taskList = res.data.data;
                for (let i = 0; i < taskList.length; i++) {
                    if (taskList[i].comState == '1') {
                        taskList[i].comState = true;
                    } else if (taskList[i].comState == '0') {
                        taskList[i].comState = false;
                    }
                }
                this.result = taskList;
            }).catch((err) => {
                console.log('报错了！');
            });
    }
};
</script>

<style lang="scss">
    .latesttask {
        width: 49%;
        float: left;
        margin-top: 20px;
        .con {
            overflow: hidden;
            width: 100%;
            height: 428px;
            border: 1px solid #e7eaf4;
            border-radius: 5px;
            .title {
                font-size: 16px;
                font-weight: bold;
                line-height: 48px;
                background: #f6f9fb;
                padding-left: 30px;
                border-bottom: 1px solid #f2f2f2;
                img {
                    vertical-align: middle;
                    margin-left: 5px;
                }
            }
            ul {
                width: 100%;
                height: 370px;
                overflow-y: auto;
                li {
                    padding: 7px 12px;
                    .bl_red {
                        border-left: 4px solid #fa6e60;
                    }
                    .bl_orange {
                        border-left: 4px solid #49cef6;
                    }
                    .bl_blue {
                        border-left: 4px solid #00c583;
                    }
                    .task {
                        .task-left {
                            width: 100%;
                            float: left;
                            padding: 10px 40px 10px 25px;
                            margin-right: -40px;
                            .taskname {
                                font-size: 14px;
                                color: #333;
                            }
                            .detail {
                                font-size: 14px;
                                margin-top: 10px;
                                line-height: 24px;
                                .proname {
                                    font-weight: bold;
                                    color: #7b7b8e;
                                }
                                .time {
                                    color: #fff;
                                    font-size: 14px;                                
                                    padding: 5px 10px;
                                    background: #bfc1c9;
                                    border-radius: 3px;
                                    line-height: 14px;
                                }
                                .cutoff {
                                    margin-left: 10px;
                                }
                                span {
                                    display: block;
                                    float: left;
                                }
                                span + span {
                                    margin-left: 6%;
                                }
                            }
                        }
                        .task-right {
                            float: right;
                            margin-top: 10px;
                        }
                    }
                }
                li:nth-child(2n) {
                    background: #e7eaf4;
                }
            }
            li {
                transition: .5s;
            }
            li.bgc_fff {
                background: #fff;
            }
            li.bgc_e4 {
                background: #e4e4e4;
            }
        }
    }   



</style>
